<template>
  <el-button v-if="dr" :size="size" :icon="Upload" plain type="success" @click="handleImport()" style="">
        上传
  </el-button>
   <!-- 上传对话框 -->
  <el-dialog :title="title" :show-close="false"  v-model="open" width="400px" append-to-body >
    <el-upload
    v-loading="upload.Dloading"
      ref="refUpload"
      :limit="1"
      accept=".xlsx, .xls,.docx,.docx,.dpf"
      :headers="upload.headers"
      :action="upload.url + '?updateSupport=' + upload.updateSupport"
      :disabled="upload.isUploading"
      :on-progress="handleFileUploadProgress"
      :on-success="handleFileSuccess"
      :on-error="handleFileError"
      :on-change="handleChange"
      :auto-upload="false"
      drag
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      
    </el-upload>
      <div class="el-upload__tip" style="color:red" >提示：仅允许上传.xlsx, .xls,.docx,.docx,.dpf格式文件！</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitFileForm" :disabled='upload.buttom'>确 定</el-button>
          <el-button @click="Cancel" >取 消</el-button>
        </span>
      </template>
    
  </el-dialog>
  <el-dialog
      title="上传结果"
      v-model="dialogVisible"
      width="40%"
      >
      <span ><p v-html="upload.responseData" style="height: 400px;overflow-y: auto;"></p></span>
      <template #footer>
        <span class="dialog-footer">
        <el-button @click="dataVisible">取 消</el-button>
      </span>
      </template>
  </el-dialog>
</template>

<script >
import { computed, ref ,reactive,defineComponent, onMounted} from 'vue'
import { useStore } from 'vuex'
import { upload } from '@/api/upload';
import {Download,Upload} from '@element-plus/icons-vue'
export default defineComponent({
  name: 'Index',
  props: {
    dr:Boolean
  },
  setup(props,context){
    let title=ref("显示/隐藏")
    // 是否显示弹出层
    let open= ref(false)
    const dialogVisible=ref(false)
      // 上传参数
    const upload=reactive({

      count:0,
      // 是否显示弹出层（上传）
      open: false,
      // 弹出层标题（上传）
      title: "",
      // 是否禁用上传
      isUploading: false,
      // 是否更新已经存在的数据
      updateSupport: 0,
      buttom:true,
      Dloading:false,
      responseData:[],
      // 设置上传的请求头部
      headers: { Authorization: "Bearer " + "getToken()" },
      // 上传的地址
      url: "api/upload"
    })
    const store = useStore()
    const size = computed(() => {
      return store.getters['setting/size'];
    });
    // 定义一个ref，并return出去 
    const refUpload = ref(null);
    const { proxy } = getCurrentInstance() 

    const methods={
        Cancel(){
          open.value=false
          upload.isUploading = false;
          refUpload.value.clearFiles();
        },
        dataVisible(){
          upload.buttom=true
          dialogVisible.value=false
        },
        
      /** 上传按钮操作 */
      handleImport() {
        title.value = "数据的上传";
        open.value = true;
      },
    // 选择文件
    handleChange(uploadFile, uploadFiles) {
      upload.buttom=false
      if(upload.count==1){
          upload.buttom=true
          upload.count=0
      }
      // proxy.Warning(
      //   `当前选择的文件是 ${uploadFile.name} ，文件大小为 ${
      //     uploadFile.size
      //   } `
      // )
    },

      handleFileError(event, file, fileList){
        upload.count=0
        proxy.Error("上传失败！")
        upload.count=upload.count+1
        upload.buttom=true
        upload.Dloading=false
        upload.isUploading = false;
      },

      // 文件上传中处理
    handleFileUploadProgress(event, file, fileList){
      upload.isUploading = true;
    },
     
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        proxy.Success("上传成功！")
        upload.Dloading=false
        open.value = false;
        upload.isUploading = false;
        refUpload.value.clearFiles();
        dialogVisible.value=true
        upload.responseData=response.msg
      },
      // 提交上传文件
      submitFileForm() {
        upload.buttom=true
        refUpload.value.submit()
        upload.Dloading=true 
      }
      }
      return {
         ...methods,
         size,
         upload,
         open,
         title,
         dialogVisible,
         Download,
         Upload,
         refUpload,
         onMounted
     }
  }
  

})
</script>

<style scoped>
.dialog-footer{
position: relative;
margin-left: 60%;
margin-top: 15px;
}
</style>
